<template>
  <div id="bdfx-board2">
    <div class="center-board-title">地区人口及编制占比</div>
    <div id="bdfxEchart2"></div>
  </div>
</template>

<script>
export default {
  name: 'bdfxEchart2',

  data() {
    return {
      option: {
        grid: {
          x: 20,
          y: 30,
          x2: 20,
          y2: 30
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
        },
        legend: {
          x: 'right', // 'center' | 'left' | {number},
          y: 'top', // 'center' | 'bottom' | {number}
          textStyle: {
            fontSize: 16,//字体大小
            color: '#ffffff'
          },
          data: ['户籍人口','常住人口', '万人编制数']
        },
        xAxis: [
          {
            type: 'category',
            data: ['南宁市', '柳州市', '桂林市', '崇左市', '钦州市', '玉林市', '百色市', '防城港市', '贺州市', '贵港市', '河池市', '来宾市', '梧州市', '北海市'],
            axisPointer: {
              type: 'shadow'
            },
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: 12,//字体大小
                color: '#f0f0f0'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            show: false,
            name: '户籍人口',
            nameTextStyle: {
              fontSize: 14,//字体大小
              color: '#ffffff'
            },
            min: 0,
            max: 250000,
            interval: 50000,
            splitLine: {
              show: false,
              lineStyle: {

              }
            },
            axisLabel: {
              formatter: '{value} ',
              show: true,
              textStyle: {
                fontSize: 16,//字体大小
                color: '#ffffff'
              }
            }
          },
          {
            type: 'value',
            show: false,
            name: '常住人口',
            nameTextStyle: {
              fontSize: 14,//字体大小
              color: '#ffffff'
            },
            min: 0,
            max: 25000,
            interval: 5000,
            splitLine: {
              show: false,
              lineStyle: {

              }
            },
            axisLabel: {
              formatter: '{value} ',
              show: true,
              textStyle: {
                fontSize: 16,//字体大小
                color: '#ffffff'
              }
            }
          },
          {
            type: 'value',
            show: false,
            name: '万人编制数',
            nameTextStyle: {
              fontSize: 14,//字体大小
              color: '#ffffff'
            },
            min: 0,
            max: 100,
            interval: 50,
            axisLabel: {
              formatter: '{value} ',
              show: true,
              textStyle: {
                fontSize: 16,//字体大小
                color: '#ffffff'
              }
            }
          }
        ],
        series: [
          {
            name: '户籍人口',
            type: 'bar',
            yAxisIndex: 0,
            data: [
              120000, 149000, 170000, 232000, 125000, 170600, 135000, 162000, 132000, 120000, 64000, 133000, 176000, 135000
            ],
            itemStyle: {
              normal: {
                barBorderRadius: 10,
                // color: this.$echarts.graphic.LinearGradient(
                //             0, 1, 0, 0,
                //             [
                //                 {offset: 0, color: '#FFC125'},
                //                 {offset: 1, color: '#EEEE00'}

                //             ]
                //         ), //柱状颜色
                label: {
                  show: true, //开启显示
                  position: 'center', //在上方显示
                  textStyle: { //数值样式
                    color: '#ffffff',
                    fontSize: 12
                  }
                }
              }
            }
          },
          {
            name: '常住人口',
            type: 'bar',
            yAxisIndex: 1,
            data: [
              12000, 14900, 17000, 23200, 12500, 17600, 13500, 16200, 13200, 12000, 6400, 13300, 17600, 13500
            ],
            itemStyle: {
              normal: {
                barBorderRadius: 10,
                // color: this.$echarts.graphic.LinearGradient(
                //             0, 1, 0, 0,
                //             [
                //                 {offset: 0, color: '#0000FF'},
                //                 {offset: 1, color: '#00BFFF'}

                //             ]
                //         ), //柱状颜色
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  textStyle: { //数值样式
                    color: '#ffffff',
                    fontSize: 12
                  }
                }
              }
            }
          },
          {
            name: '万人编制数',
            type: 'line',
            yAxisIndex: 2,
            data: [12, 22, 33, 45, 63, 12, 23, 23, 30, 65, 20, 62, 45, 63],
            itemStyle: {
              normal: {
                color: '#00BFFF', //折线颜色
              }
            }
          }
        ]
      }
    }
  },
  mounted() {
    this.initEchart();
  },
  methods: {
    initEchart() {
      var chartDom = document.getElementById('bdfxEchart2');
      var myChart = this.$echarts.init(chartDom);
      myChart.setOption(this.option);
    }
  }
}
</script>

<style lang="scss">
#bdfx-board2 {
  width: 60%;
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
  float: left;

  .center-board-title {
    font-weight: bold;
    height: 50px;
    display: flex;
    align-items: center;
    font-size: 20px;
    justify-content: center;
  }
}
#bdfxEchart2 {
  width: 100%;
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
}
</style>
